import React, { Component } from 'react'
import {Card, Button, List, Avatar, Badge, Spin} from 'antd'
import {markNotificationById, markAllNotificationHasRead} from '../../actions/notifications'
import { connect } from 'react-redux'

 class Notification extends Component {
    
    render() {
        console.log(this.props.isLoading)
        return (
            <Spin spinning={this.props.isLoading}>
                <Card title='通知中心'
                    bordered={false}
                    extra={this.props.list.every(item=>item.hasRead)?null: <Button onClick={this.props.markAllNotificationHasRead}>标记为已读</Button>}
                    >
                    <List
                        itemLayout="horizontal"
                        dataSource={this.props.list}
                        renderItem={item => (
                        <List.Item
                            extra={item.hasRead?null:<Button onClick={this.props.markNotificationById.bind(this, item.id)}>标记为已读</Button>}>
                            <List.Item.Meta
                            avatar={<Badge dot={!item.hasRead}><Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /></Badge>}
                            title={item.title}
                            description={item.desc}
                            />
                        </List.Item>
                        )}
                    />,
                        
            

                </Card>
            </Spin>
        
        )
    }
}
const mapState = state => {
    const {list, isLoading } = state.notification
    return {
        list,
        isLoading
    }
}



export default connect(mapState, {markNotificationById, markAllNotificationHasRead})(Notification)